<template>
	<view class="pupop">
		
		<view class="popup-box" :animation="animationData">
			<view class="pupop-btn">
				<view @tap="cancel">取消</view>
				<view @tap="confirm" style="color: #2979ff;">确定</view>
			</view>
			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
	import { addressList } from './cityData.js'
	export default {
		data() {
			return {
				value: [],
				addressList,
				provinceList: [],
				cityList: [],
				areaList: [],
				indicatorStyle: `height: 50px;`,
				provinceIndex: 0,
				cityIndex: 0,
				areaIndex: 0,
				animationData: {}
			}
		},
		props: {
			defaultValue: {
				type: String,
				default: () => ''
			},
			visible: {
				type: Boolean,
				default: () => false
			},
			maskCloseAble: {
				type: Boolean,
				default: () => true
			}
		},
		watch: {
			visible (val) {
				
				this.changeActive()
			},
			defaultValue (val) {
				this.changeDefault(val)
			}
		},
		created() {
			var provinceList = []
			addressList.filter(item => {
				provinceList.push({
					code: item.code,
					name: item.name
				})
			})
			this.provinceList = [...provinceList]
			if (!this.defaultValue) {
				this.cityList = addressList[0].children
				this.areaList = addressList[0].children[0].children
			} else {
				var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}
				if (city[this.defaultValue.substr(0 ,2)]) {
					var province = this.defaultValue.substr(0, 2)
					var city = this.defaultValue.substr(0, 4)
					this.provinceIndex = 0
					this.cityIndex = 0
					this.areaIndex = 0
					this.provinceIndex = addressList.findIndex(obj => {
						return obj.code == province
					})
					this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
					this.cityList = addressList[this.provinceIndex].children
					this.cityIndex = this.cityList.findIndex(obj => {
						return obj.code == city
					})
					this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
					this.areaList = this.cityList[this.cityIndex].children
					console.log(this.areaList, this.defaultValue)
					this.areaIndex = this.areaList.findIndex(obj => {
						return obj.code == this.defaultValue
					})
					this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
					console.log(this.areaIndex)
					this.value = [...[this.provinceIndex, this.cityIndex, this.areaIndex]]
				} else {
					uni.showToast({
						title: '地区编码格式不正确',
						icon: 'none'
					})
					console.log('地区编码格式不正确')
				}
			}
			this.changeActive()
		},
		methods: {
			changeDefault(val){
				this.defaultValue = val
				var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}
				if (city[this.defaultValue.substr(0 ,2)]) {
					var province = this.defaultValue.substr(0, 2)
					var city = this.defaultValue.substr(0, 4)
					this.provinceIndex = 0
					this.cityIndex = 0
					this.areaIndex = 0
					this.provinceIndex = addressList.findIndex(obj => {
						return obj.code == province
					})
					this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
					this.cityList = addressList[this.provinceIndex].children
					this.cityIndex = this.cityList.findIndex(obj => {
						return obj.code == city
					})
					this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
					this.areaList = this.cityList[this.cityIndex].children
					console.log(this.areaList, this.defaultValue)
					this.areaIndex = this.areaList.findIndex(obj => {
						return obj.code == this.defaultValue
					})
					this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
					console.log(this.areaIndex)
					this.value = [...[this.provinceIndex, this.cityIndex, this.areaIndex]]
				} else {
					uni.showToast({
						title: '地区编码格式不正确',
						icon: 'none'
					})
					console.log('地区编码格式不正确')
				}
			},
			confirm () {
				console.log(this.provinceIndex, this.cityIndex, this.areaIndex)
				this.$emit('confirm', {
					code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
					name: addressList[this.provinceIndex].name +'-'+ addressList[this.provinceIndex].children[this.cityIndex].name + '-'+ addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
				})
			},
			cancel () {
				
				this.$emit('cancel')
			},
			// 动画
			changeActive () {
				var active = '-315px'
				if (this.visible) {
					active = 0
				}
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'linear'
				})
				animation.bottom(active).step()
				this.animationData = animation.export()
				
			},
			bindChange(e) {
				e.detail.value[0] = e.detail.value[0] || 0
				e.detail.value[1] = e.detail.value[1] || 0
				e.detail.value[2] = e.detail.value[2] || 0
				if (e.detail.value[0] != this.provinceIndex) {
					// console.log('监听第一列')
					this.provinceChange(e.detail.value[0])
				} else if (e.detail.value[1] != this.cityIndex) {
					// console.log('监听第二列')
					this.cityChange(e.detail.value[1])
				} else if (e.detail.value[2] != this.areaIndex) {
					// console.log('监听第三列')
					this.areaChange(e.detail.value[2])
				}
			},
			// 监听第一列变化
			provinceChange (e) {
				this.provinceIndex = e
				this.cityIndex = 0
				this.areaIndex = 0
				this.value = [...[e, 0, 0]]
				this.cityList = addressList[e].children
				this.areaList = addressList[e].children[0].children
			},
			// 监听第二列变化
			cityChange (e) {
				this.cityIndex = e
				this.areaIndex = 0
				// console.log(this.cityIndex, this.areaIndex)
				this.value = [...[this.provinceIndex, e, 0]]
				this.cityList = addressList[this.provinceIndex].children
				this.areaList = addressList[this.provinceIndex].children[e].children
			},
			// 监听第三列变化
			areaChange (e) {
				this.areaIndex = e
			},
			// 点击模态框
			close () {
				if (this.maskCloseAble) {
					this.cancel()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pupop {
		.popup-box {
			position: fixed;
			left: 0;
			bottom: -315px;
			z-index: 99999;
			background: #fff;
			padding-bottom: 50px;
			.pupop-btn{
				height: 40px;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				justify-content: space-between;
			}
		}
		.pupop-model {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: rgba(0, 0, 0, .5);
		}
		.pupop-models{
			display: none;
		}
		.picker-view {
			width: 750rpx;
			height: 225px;
			margin-top: 20rpx;
		}
		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50px;
		}
	}
</style>
